/**
 * 回复 审核 已回复
 * @author zhangqiang
 * @date   2016/10/20
 */
import Swiper from "../components/Swiper";
import LargeImg from '../components/LargeImg';
import {health} from "../const/offices";
import {prefix} from "../const/prefix";

(function (lf, r) {
    var RC = r.createClass,
        ajax = lf.utils.ajax,//全局
        api = health.api,
        apiUrl = prefix.oldpeople,
        getUrlParam = lf.utils.getUrlParam;//获取自定义url

    const TYPE = getUrlParam('type'),//根据url不同类型显示不同页面
        ORDERID = getUrlParam('orderId'),//对应工作流实例ID
        STATE = getUrlParam('state'),//根据状态显示颜色
        ID = getUrlParam('id'),//待审核页面发送数据需要主键ID
        DATAID = getUrlParam('dataId'),//上一个页面拿到员工id
        OPENID = getUrlParam('openId'),//上一个页面拿到oemcod
        UNTREATED = 'UNTREATED',//待处理1
        COMPLETED = 'COMPLETED',//已完成2
        ARCHIVED = 'ARCHIVED',//已归档
        CLOSE = 'CLOSE',//已关闭
        QLLIGCP = 'QLLIGCP',//已审核
        SENTED = 'SENTED',//已派单
        CHECK = 'CHECK';//全部报事

    if (TYPE == UNTREATED) {//待处理
        var Add = RC({
            getInitialState: function () {
                return ({
                    add: {},
                    data: {},
                    largeImgSrc: '',
                })
            },
            render: function () {
                var init = this.props.data,
                    fmt = 'yyyy-MM-dd hh:mm',
                    reportTime = lf.utils.format(init.reportTime, fmt),
                    pics = '',
                    reportMode = init.reportMode == '1' ? '来电' : init.reportMode == '2' ?
                        'APP客户端' : init.reportMode == '3' ? '上门' : '';

                if (init.picUrl != undefined) {
                    pics = init.picUrl && init.picUrl.split(',');
                }

                return (
                    <div className="box-siz">
                        <div className="img-add">
                            <div className="place">
                                <Swiper imgList={pics} enlargeHandler={this.enlargeHandler}/>
                            </div>
                            <div className="place rep">
                                <div className="text-cl">所属项目：</div>
                                <div className="text-rg">{init.projectName }</div>
                            </div>
                            <div className="place">
                                <div className="text-cl text-lf">房号：</div>
                                <div className="text-rg">{init.houseNum || '无'}</div>
                            </div>
                            <div className="place">
                                <div className="text-cl text-lf">业主：</div>
                                <div className="text-rg">{init.proprietorName || '无'}</div>
                            </div>
                            <div className="place">
                                <div className="text-cl text-lf">报事人：</div>
                                <div className="text-rg">{init.reporterName }</div>
                            </div>
                            <div className="place">
                                <div className="text-cl">报事时间：</div>
                                <div className="text-rg">{reportTime || '无'}</div>
                            </div>
                            <div className="place">
                                <div className="text-cl">报事方式：</div>
                                <div className="text-rg">{reportMode}</div>
                            </div>
                            <div className="place">
                                <div className="text-cl">联系电话：</div>
                                <div className="text-rg">{init.phone}</div>
                            </div>
                            <div className="place">
                                <div className="text-cl">内容描述：</div>
                                <div className="text-rg">{init.content}</div>
                            </div>
                            <div className="place">
                                <div className="text-cl">反馈内容：</div>
                                <div className="text-rg">{init.result || '无'}</div>
                            </div>
                            <div className="status">未处理</div>
                        </div>
                        <LargeImg src={this.state.largeImgSrc}/>
                    </div>
                )
            },
            enlargeHandler: function (src) {
                this.setState({largeImgSrc: src});
            }
        });

        var Body = RC({
            getInitialState: function () {
                return ({
                    len: '',
                    add: '',
                    resList: '',
                    waing: [],
                    isShow: false,
                    processorList: [],
                    nextOperator: '',
                })
            },
            componentWillMount(){
                var me = this;
                ajax({//上部分相片到详情
                    url:apiUrl + api.detail,
                    type: 'post',
                    data: {
                        eventId: ID,
                    },
                    headers: {
                        openId: OPENID,
                    },
                    success: function (res) {
                        me.setState({
                            add: res.data
                        })
                    }
                })//获取报事详情
            },
            render: function () {
                var data = this.state.add;
                return (
                    <div className="box-mic">
                        <Add data={data}/>
                    </div>
                )
            }
        });
    }

    else if (TYPE == COMPLETED || TYPE == ARCHIVED ||
        TYPE == CLOSE || TYPE == QLLIGCP ||
        TYPE == SENTED || TYPE == CHECK) {//已完成 已归档 已关闭 已审核 已派单 全部报事
        var Add = RC({
            getInitialState: function () {
                return ({
                    len: {},
                    add: {},
                    waing: [],
                    largeImgSrc: '',
                    largeImg: '',
                    imgList: [],
                })
            },
            render: function () {
                var init = this.props.data,
                    me = this,
                    fmt = 'yyyy-MM-dd hh:mm',
                    pics = [],
                    reportTime = lf.utils.format(init.reportTime, fmt);

                if (init.picUrl != undefined)
                    pics = init.picUrl && init.picUrl.split(',');

                var reportMode = init.reportMode == '1' ? '来电' : init.reportMode == '2' ?
                        'APP客户端' : init.reportMode == '3' ? '上门' : '',
                    review = TYPE == CHECK ? STATE == 0 ? 'status' : 'statusNo' : 'statusNo',
                    statusAdd = STATE == 0 ? '未处理' : STATE == 1 ? '已派单' : STATE == 2 ?
                        '已完成' : STATE == 3 ? '已归档' : STATE == 4 ? '已关闭' : STATE == 5 ? '待审核' : null;

                if (init) {
                    console.log('out');

                    return (
                        <div className="box-siz">
                            <div className="img-add">
                                <div className="place">
                                    <Swiper imgList={pics||''} enlargeHandler={me.enlargeHandler} />
                                </div>
                                <div className="place rep">
                                    <div className="text-cl">所属项目：</div>
                                    <div className="text-rg">{init.projectName }</div>
                                </div>
                                <div className="place">
                                    <div className="text-cl text-lf">房号：</div>
                                    <div className="text-rg">{init.houseNum || '无'}</div>
                                </div>
                                <div className="place">
                                    <div className="text-cl text-lf">业主：</div>
                                    <div className="text-rg">{init.proprietorName || '无'}</div>
                                </div>
                                <div className="place">
                                    <div className="text-cl text-lf">报事人：</div>
                                    <div className="text-rg">{init.reporterName }</div>
                                </div>
                                <div className="place">
                                    <div className="text-cl">报事时间：</div>
                                    <div className="text-rg">{reportTime || '无'}</div>
                                </div>
                                <div className="place">
                                    <div className="text-cl">报事方式：</div>
                                    <div className="text-rg">{reportMode}</div>
                                </div>
                                <div className="place">
                                    <div className="text-cl">联系电话：</div>
                                    <div className="text-rg">{init.phone}</div>
                                </div>
                                <div className="place">
                                    <div className="text-cl">内容描述：</div>
                                    <div className="text-rg">{init.content}</div>
                                </div>
                                <div className="place">
                                    <div className="text-cl">反馈内容：</div>
                                    <div className="text-rg">{init.result || '无'}</div>
                                </div>
                                <div
                                    className={review}>{TYPE == COMPLETED ? '已完成' :
                                    TYPE == ARCHIVED ? '已归档' : TYPE == CLOSE ? '已关闭' :
                                        TYPE == QLLIGCP ? '待审核' : TYPE == SENTED ? '已派单' :
                                            TYPE == CHECK ? statusAdd : ''}</div>
                                <LargeImg src={me.state.largeImgSrc}/>
                            </div>
                        </div>
                    )
                } else {
                    return null
                }
            },
            // shouldComponentUpdate(){
            //     //dosomething
            // },
            //图片问题
            enlargeHandler: function (src) {
                this.props.getChildUrl(src);
            }
        });

        var List = RC({
            getInitialState: function () {
                return ({
                    menu: '',
                    resList: '',
                    condition: '',
                    largeImgSrc: '',
                    largeImg: '',
                    imgList: [],
                    affairs: [],
                    audit: [],
                })
            },
            componentDidUpdate: function () {
                var persons = $('.toDetail');
                var me = this,
                    processing = me.props.resList,
                    affairs = [],
                    pics = '',
                    audit = [];

                processing.map((info, i)=> {
                    if (info.taskDisplayName == '领导审核' && info.status == '3') {
                        audit[i] = <div className="layer-text-con">
                            <div className="layer-text-row">
                                <p className="layer-text-tit">
                                    <span>审核意见</span><span>:</span>
                                </p>
                                <aside className="break-word">{info.result || '无'}</aside>
                            </div>
                        </div>
                    }
                    if (info.taskDisplayName == "办理" && info.status == '3') {
                        if (info.picUrls != undefined) {
                            pics = info.picUrls.split(',');
                        }
                        if (info.assistAccepterName != undefined) {
                            var AccepterName = info.assistAccepterName.split(','),
                                assis = [],
                                nameAdd = [],
                                assisName = [];
                            for (var j = 0; j < AccepterName.length; j++) {
                                assis.push(AccepterName[j].split('--'))
                            }
                            $.each(assis, function (j, e) {
                                assisName.push(e[2]);
                            })
                            $.each(assisName, function (j, e) {
                                nameAdd += j == assisName.length - 1 ? e + '' : e + ',';
                            })
                        }
                        affairs[i] = <div className="layer-text-con">
                            <div className="layer-text-row">
                                <p className="layer-text-tit">
                                    <span>领取/使用材料</span><span>:</span>
                                </p>
                                <aside className="break-word">{info.consumptions || '无'}</aside>
                            </div>
                            <div className="layer-text-row">
                                <p className="layer-text-tit">
                                    <span>处理结果</span><span>:</span>
                                </p>
                                <aside className="break-word">{info.result || '无'}</aside>
                            </div>
                            <div className="layer-text-row">
                                <p className="layer-text-tit">
                                    <span>协助办理人</span><span>:</span>
                                </p>
                                <aside className="break-word">{ nameAdd || '无'}</aside>
                            </div>
                            {
                                !pics ? '' :
                                    <Swiper imgList={pics} enlargeHandler={me.enlargeHandler} />
                            }
                        </div>
                    }
                })
                $.each(persons, function (i, item) {
                    if ($(this).text() == '已办理' || $(this).text() == '已审核' || $(this).text() == '已回访') {
                        $(this).addClass('mask');
                    }
                    var $me = $(this);
                    $me.on('touchstart', function () {
                        if ($(this).text() == '已办理' || $(this).text() == '已审核' || $(this).text() == '已回访') {
                            $('.bottom-form-component').addClass('this');
                            $('.bottom-form-layout').addClass('this');
                        }
                        if ($(this).text() == '已办理') {
                            me.setState({
                                condition: 0,
                                affairs: affairs[i],
                            })
                        } else if ($(this).text() == '已审核') {
                            me.setState({
                                condition: 1,
                                audit: audit[i],
                            })
                        } else if ($(this).text() == '已回访') {
                            me.setState({
                                condition: 2,
                            })
                        }
                    }.bind(this))
                });
                $('.bottom-form-component').on('touchstart', function (e) {
                    if (e.target.className == 'mask-layout') {
                        $('.bottom-form-component').removeClass('this');
                        $('.bottom-form-layout').removeClass('this');
                    }
                }.bind(this))
            },
            enlargeHandler: function (src) {
                this.props.getChildUrl(src);
            },
            render: function () {
                var into = this.props.resList,
                    me = this,
                    picsAdd = '',
                    fmt = 'MM-dd hh:mm';

                var service = into && into.map(function (e, i) {//已回访点击弹出详情
                        if (into[i].taskDisplayName == "客服回访" && into[i].status == '3') {

                            if (e.picUrls != undefined){
                                picsAdd = e.picUrls.split(',');
                            }
                                console.log(picsAdd)
                            return <div key={i} className="layer-text-con">
                                <div className="layer-text-row">
                                    <p className="layer-text-tit">
                                        <span>服务及时性</span><span>:</span>
                                    </p>
                                    <aside
                                        className="break-word">{e.timeliness == 0 ?
                                        '不及时' : e.timeliness == 1 ? '及时' : null }</aside>
                                </div>
                                <div className="layer-text-row">
                                    <p className="layer-text-tit">
                                        <span>服务水准</span><span>:</span>
                                    </p>
                                    <aside
                                        className="break-word">{e.level == 0 ?
                                        '差' : e.level == 1 ? '一般' : e.level == 2 ? '好' : null}</aside>
                                </div>
                                <div className="layer-text-row">
                                    <p className="layer-text-tit">
                                        <span>服务态度</span><span>:</span>
                                    </p>
                                    <aside
                                        className="break-word">{e.attitude == 0 ?
                                        '差' : e.attitude == 1 ? '一般' : e.attitude == 2 ? '好' : null}</aside>
                                </div>
                                <div className="layer-text-row">
                                    <p className="layer-text-tit">
                                        <span>回访方式</span><span>:</span>
                                    </p>
                                    <aside
                                        className="break-word">{ e.revisitMode == 1 ?
                                        '电话' : e.revisitMode ? '上门' : null }</aside>
                                </div>
                                <div className="layer-text-row">
                                    <p className="layer-text-tit">
                                        <span>回访结果</span><span>:</span>
                                    </p>
                                    <aside className="break-word">{ e.result }</aside>
                                </div>
                                {
                                    !picsAdd ? '' :
                                        <Swiper imgList={picsAdd} enlargeHandler={me.enlargeHandler}/>
                                }
                            </div>
                        }
                    })

                let list = into && into.map(function (info, i) {
                        let Time = lf.utils.format(info.acceptTime, fmt),
                            arr = info.currAccepterName && info.currAccepterName.split('--'),
                            n = arr && arr.length - 1,
                            textName;

                        if (into[i].taskDisplayName == "派单" && into[i].status == '2'
                            || into[i].taskDisplayName == "派单" && into[i].status == '1') {
                            textName = '派单中'
                        } else if (into[i].taskDisplayName == "派单" && into[i].status == '3') {
                            textName = '已派单'
                        } else if (into[i].taskDisplayName == "派工" && into[i].status == '0'
                            || into[i].taskDisplayName == "派工" && into[i].status == '1') {
                            textName = '派工中'
                        } else if (into[i].taskDisplayName == "派工" && into[i].status == '2'
                            || into[i].taskDisplayName == "领导审核" && into[i].status == '2'
                            || into[i].taskDisplayName == "客服回访" && into[i].status == '2'
                            || into[i].taskDisplayName == "办理" && into[i].status == '2') {
                            textName = '已退回'
                        } else if (into[i].taskDisplayName == "派工" && into[i].status == '3') {
                            textName = '已派工'
                        } else if (into[i].taskDisplayName == "办理" && into[i].status == '0'
                            || into[i].taskDisplayName == "办理" && into[i].status == '1') {
                            textName = '办理中'
                        } else if (into[i].taskDisplayName == "办理" && into[i].status == '3') {
                            textName = '已办理'
                        } else if (into[i].taskDisplayName == '领导审核' && into[i].status == '0'
                            || into[i].taskDisplayName == '领导审核' && into[i].status == '1') {
                            textName = '领导审核中'
                        } else if (into[i].taskDisplayName == "领导审核" && into[i].status == '3') {
                            textName = '已审核'
                        } else if (into[i].taskDisplayName == '客服回访' && into[i].status == '0'
                            || into[i].taskDisplayName == '客服回访' && into[i].status == '1') {
                            textName = '客服回访中'
                        } else if (into[i].taskDisplayName == "客服回访" && into[i].status == '3') {
                            textName = '已回访'
                        }

                        return <div key={i} className="tpd-row">
                            <p className="tpd-left-con">
                                <i className={into.length==i+1 ? 'hid':''}></i>
                                <span className="task-processing-name">{arr && arr[n]}</span>
                                <span className="green toDetail">{textName}</span>
                            </p>
                            <p>{Time}</p>
                        </div>
                    })
                var fileMask = this.state.condition;

                return (
                    <div>
                        <div className="detail">
                            {list}
                        </div>
                        <section className="bottom-form-component">
                            <div className="mask-layout"></div>
                            <div className="bottom-form-layout">
                                {
                                    fileMask == 0 ? this.state.affairs : fileMask == 1 ?
                                        this.state.audit : fileMask == 2 ? {service} : null
                                }
                            </div>
                        </section>
                    </div>
                )
            }
        });
        var Body = RC({
            getInitialState: function () {
                return ({
                    len: '',
                    add: '',
                    waing: [],
                    url: '',
                    type: '',
                    resList: [],
                    isShow: false,
                    processorList: [],
                    nextOperator: '',
                })
            },
            componentWillMount(){
                var me = this,
                    user = me.props.user;

                ajax({//第一级菜单待咨询回复列表下面问题列表
                    url:apiUrl + api.ConsultList,
                    type: 'post',
                    data: {
                        eventId: ID,
                    },
                    headers: {
                        openId: OPENID,
                    },
                    success: function (data) {
                        me.setState({//state 1待回复 2回复
                            len: data.dataList
                        });
                    }
                })

                ajax({//上部分相片和详情
                    url:apiUrl + api.detail,
                    type: 'post',
                    data: {
                        eventId: ID,
                    },
                    headers: {
                        openId: OPENID,
                    },
                    success: function (res) {
                        me.setState({
                            add: res.data
                        })
                    }
                })//获取报事详情

                if (ORDERID && ORDERID != 'undefined') {
                    ajax({//上部分相片到历史列表
                        url:apiUrl + api.getdetail,
                        type: 'get',
                        data: {
                            orderId: ORDERID,
                            staffId: DATAID,//user.id,
                        },
                        headers: {
                            openId: OPENID,
                        },
                        success: function (file) {//工单历史流程
                            if(file.code !=200) return;//返回500引起报错
                            me.setState({
                                resList: file.data.eventProcessList
                            })
                        }
                    })// 获取工单详情
                }
                lf.appJs.refresh();
            },
            getChildUrl: function (url) {
                this.setState({url:url,})
            },
            render: function () {
                var data = this.state.add,
                    inti = this.state.len,  //1待回复 2回复
                    me = this,
                    fmt = 'yyyy-MM-dd hh:mm';
                var file = inti && inti.map(function (infn, i) {
                        var Time = lf.utils.format(infn.createTime, fmt);
                        if (infn.status == 1) {
                            return <div key={i} className="priv">
                                <div className="line undefined">
                                    <div className="text-cl line-title">咨询时间：</div>
                                    <div className="line-content">{Time}</div>
                                </div>
                                <div className="line undefined">
                                    <div className="text-cl line-title">咨询内容：</div>
                                    <div className="line-content">{infn.content}</div>
                                </div>
                            </div>
                        } else if (infn.status == 2) {
                            return <div key={i} className="priv">
                                <div className="line undefined">
                                    <div className="text-cl line-title">回复时间：</div>
                                    <div className="line-content">{Time}</div>
                                </div>
                                <div className="line undefined">
                                    <div className="text-cl line-title">回复内容：</div>
                                    <div className="line-content">{infn.content}</div>
                                </div>
                            </div>
                        }
                    })
                return (
                    <div className="box-mic">
                        <Add data={data} getChildUrl={me.getChildUrl}/>
                        <List data={data} getChildUrl={me.getChildUrl} resList={this.state.resList}/>
                        <div className="reflex">
                            {file}
                        </div>
                        <LargeImg src={me.state.url}/>
                    </div>
                )
            }
        });
    }
    lf.bridgeJs.getUser(function (user) {
        r.render(
            <Body user={user}/>,
            document.getElementById('root'), function () {
                $('#root').css('background', '#fff');
            }
        )
    })
})(liefeng, React)

